import {genCharByAiAsyncUsingPost, genCharByAiMqUsingPost} from '@/services/yanbi/chartController';
import { Button, Card, Col, Form, Input, message, Row, Select, Space, Upload } from 'antd';
import { UploadOutline } from 'antd-mobile-icons';
import { useForm } from 'antd/es/form/Form';
import TextArea from 'antd/lib/input/TextArea';
import React, { useState } from 'react';

const AddChartAsync: React.FC = () => {
  const [form] = useForm();
  const [, setChart] = useState<API.BiResponse>();
  const [submitting, setSubmitting] = useState<boolean>(false);
  const [setOption] = useState<any>();
  const onFinish = async (values: any) => {
    // 避免重复提交
    if (submitting) {
      return;
    }
    // setChart(undefined);
    // setOption(undefined);
    setSubmitting(true);
    const params = {
      ...values,
      file: undefined,
    };
    try {
      // const res = await genCharByAiAsyncUsingPost(params, {}, values.file.file.originFileObj);
      const res = await genCharByAiMqUsingPost(params, {}, values.file.file.originFileObj);
      console.log(res);
      if (!res?.data) {
        message.error('分析失败');
      } else {
        message.success('分析任务提交成功，请稍后在我的图表页面查看');
        form.resetFields();
      }
    } catch (e: any) {
      message.error('分析失败. ', e.message);
    }
    setSubmitting(false);
  };

  return (
    <div className="add-chart-sync">
      <Row gutter={24}>
        <Col span={12}>
          <Card title="智能分析">
            <Form
              form={form}
              name="addChart"
              labelAlign="left"
              labelCol={{ span: 4 }}
              onFinish={onFinish}
              initialValues={{}}
            >
              <Form.Item
                name="goal"
                label="分析目标"
                rules={[{ required: true, message: '请输入你的图标名称' }]}
              >
                <TextArea placeholder="请输入你的分析需求,比如: 分析网站用户的增长情况" />
              </Form.Item>

              <Form.Item
                name="name"
                label="图标名称"
                rules={[{ required: true, message: '请输入你的图标名称' }]}
              >
                <Input placeholder="请输入你的图标名称" />
              </Form.Item>

              <Form.Item
                name="chartType"
                label="图表类型"
                hasFeedback
                rules={[{ required: true, message: '请选择图表类型' }]}
              >
                <Select
                  options={[
                    { value: '折线图', label: '折线图' },
                    { value: '柱状图', label: '柱状图' },
                    { value: '堆叠图', label: '堆叠图' },
                    { value: '饼图', label: '饼图' },
                    { value: '雷达图', label: '雷达图' },
                  ]}
                />
              </Form.Item>

              <Form.Item name="file" label="原始数据">
                <Upload name="file" maxCount={1}>
                  <Button icon={<UploadOutline />}>上传 csv 文件</Button>
                </Upload>
              </Form.Item>

              <Form.Item wrapperCol={{ span: 12, offset: 4 }}>
                <Space>
                  <Button
                    type="primary"
                    htmlType="submit"
                    loading={submitting}
                    disabled={submitting}
                  >
                    提交
                  </Button>
                  <Button htmlType="reset">重置</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>
      </Row>
    </div>
  );
};
export default AddChartAsync;
